<template>
  <div class="playgame-body">
    <h1 class="game-name">{{gameinfo.gamename}}<span style="color: #00bcd4;margin-left: 20px;">请下载客户端获取此游戏</span></h1>
      <div style="width: 1500px;height: 800px;">
        <div style="margin: auto 0">
          <div class="img-show"></div>
        </div>
      </div>
    <div class="" style="margin-bottom: 30px;">
      <ul class="icon-body">
        <li class="dib">
          <svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianzan"></use></svg>
          <div class="name">点赞</div>
        </li>
        <li class="dib">
          <svg class="icon" aria-hidden="true"><use xlink:href="#icon-buzan"></use></svg>
          <div class="name">不赞</div>
        </li>
        <li class="dib" @click="reflash">
          <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shuaxin"></use></svg>
          <div class="name">刷新</div>
        </li>
        <li class="dib">
          <svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiazai"></use></svg>
          <div class="name">下载客户端</div>
        </li>
      </ul>
    </div>
    <comments :gameid="gameid"/>
  </div>
</template>

<script>
import comments from './comments.vue';
import {getdatabyid} from "../../api/getdata";

export default {
  name: "index",
  data(){
    return{
      gameinfo: {},
      load: true,
      gameid: 5
    }
  },
  components: {
    comments
  },
  created() {
    this.gameid = this.$route.query.gameid
    console.log(this.gameid)
    this.getdate()
  },
  methods:{
    async getdate() {
      const params = {
        id: this.$route.query.gameid
      }
      console.log(params)
      this.gameinfo = await new Promise(((resolve, reject) => {
        getdatabyid(params).then(res => {
          resolve(res.data[0])
        })
      }))
    },
    reflash(){
      this.load = false
      setTimeout(() => {
        this.load = true
      },30)
    }
  }
}
</script>

<style scoped>
.img-show{
  width: 1500px;
  height: 800px;
  background-image: url(http://localhost:5000/img/Stacklands.png);
  background-repeat: no-repeat;
  background-size: 1000px;
  background-position: center center;
}
.name{
  text-align: center;
}
.icon{
  display: block;
  width: 150px;
  height: 50px;
  line-height: 50px;
  font-size: 45px;
  margin: 10px 0;
  color: #333;
  cursor: pointer;
}
.dib{
  display: inline-block;
}
.icon-body{
  width: 100% !important;
  overflow: hidden;
}
.playgame-body{
  width: 1500px;
  margin: 0 auto;
}
.game-name{
  font-size: 37px;
  color: white;
  line-height: 60px;
}
</style>
